<template>
  <div class="m-menu">
    <dl
      class="nav"
      @mouseleave="mouseleave">
      <dt>全部分类</dt>
      <dd
        v-for="(item,idx) in menu"
        :key="idx"
        @mouseenter="enter">
        <i :class="item.type"/>{{ item.name }}<span class="arrow"/>
      </dd>
    </dl>
    <div
      v-if="kind"
      class="detail"
      @mouseenter="sover"
      @mouseleave="sout">
      <template
        v-for="(item,idx) in curdetail.child">
        <h4 :key="idx" style="color: #31BBAC">{{ item.title }}</h4>
        <span
          v-for="v in item.child"
          :key="v">{{ v }}</span>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  // name: "shopmenu",
  data() {
    return {
      kind: '',
      menu: [{
        type: 'food',
        name: '洗护',
        child: [{
          title: '美食',
          child: ['代金券', '甜点饮品', '火锅', '自助餐', '小吃快餐']
        }]
      }, {
        type: 'takeout',
        name: '狗粮',
        child: [{
          title: '外卖',
          child: ['美团外卖']
        }]
      }, {
        type: 'hotel',
        name: '运动',
        child: [{
          title: '酒店星级',
          child: ['经济型', '舒适/三星', '高档/四星', '豪华/五星']
        }]
      }]
    }
  },
  computed: {
    curdetail: function () {
      return this.$store.state.home.menu.filter(item => item.type===this.kind)[0]

      // return this.menu.filter(item => item.type === this.kind)[0]
    }
  },
  methods: {
    mouseleave: function () {
      let self = this;
      self._timer = setTimeout(function () {
        self.kind = ''
      }, 150)
    },
    enter: function (e) {
      this.kind = e.target.querySelector('i').className
    },
    sover: function () {
      clearTimeout(this._timer)
    },
    sout: function () {
      this.kind = ''
    }
  },
}
</script>

<style scoped lang="scss">
.m-menu {
  width: 230px;
  height: 467px;
  box-sizing: border-box;
  margin-top: -50px;
  margin-left: 20px;
  color: #FFF;
  position: relative;
  background: linear-gradient(-180deg, rgba(2, 181, 157, .85) 2%, rgba(22, 146, 183, .85) 100%);

  dt {
    height: 50px;
    padding-top: 15px;
    box-sizing: border-box;
    font-size: 16px;
    font-weight: 400;
    margin-left: 15px;
  }

  dd {
    position: relative;
    margin-left: 15px;
    box-sizing: border-box;
    padding: 2px 12px;
    height: 26px;
    cursor: pointer;

    &:hover {
      background: rgba(255, 255, 255, .2);

      & > i {
        opacity: 1;
      }
    }
  }

  .nav {
    dd > i {
      font-size: 14px;
      font-style: normal;
      opacity: 0.3;
      margin-right: 11px;

      &:before {
        width: 14px;
        height: 14px;
        display: inline-block;
      }
    }


    .arrow {
      width: 4px;
      height: 4px;
      border-bottom: 1px solid #fff;
      border-right: 1px solid #fff;
      transform: rotate(-45deg);
      display: block;
      position: absolute;
      right: 13px;
      top: 0;
      bottom: 0;
      margin: auto;
    }
  }

  .detail {
    padding: 0 30px;
    position: absolute;
    left: 230px;
    bottom: 0;
    width: 400px;
    height: 416px;
    background: #fff;
    z-index: 9999;

    h4 {
      margin-top: 24px;
      height: 22px;
      line-height: 22px;
      padding-bottom: 10px;
      border-bottom: 1px solid #e5e5e5;
    }

    span {
      color: #999;
      font-size: 12px;
      line-height: 15px;
      display: inline-block;
      margin-right: 16px;
      margin-top: 10px;
      cursor: pointer;

      &:hover {
        color: #31BBAC;
      }
    }
  }
}
</style>
